
import React, { Component } from 'react'
import NavBar from './NavBar'
import NavBarTwo from './NavBarTwo'

export class App extends Component {
  render() {
    return (
      <div>
        {/* 插槽实现方式一：使用children */}
        <NavBar>
          <span>插槽1</span>
          <span>插槽2</span>
          <span>插槽3</span>
        </NavBar>
        {/* 插槽实现方式二：使用props */}
        <NavBarTwo
          leftSlot={<button>按钮</button>}
          centerSlot={(item) => <h2>{ item }</h2>}
          rightSlot={<i>斜体</i>}
        />
      </div>
    )
  }
}

export default App